<template>
  <div
    v-if="visible"
    v-show="visible"
    class="ant-drawer ant-drawer-right ant-drawer-open small"
    style="width: 100%"
  >
    <div class="ant-drawer-content-wrapper" style="width: 100%">
      <div class="ant-drawer-header">
        <div class="ant-drawer-title">画板</div>
        <button aria-label="Close" class="ant-drawer-close" @click="onClose">
          <a-icon type="close" />
        </button>
      </div>
      <div class="ant-drawer-content p10">
        <div
          id="sketchpadRoot"
          v-if="visible"
          style="height: calc(100vh - 80px)"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { message } from 'ant-design-vue'
import {
  insertHtmlResourceJs,
  insertHtmlResourceCss,
  insertHtmlResourceFont
} from 'utils/utils.js'
export default {
  name: 'Sketchpad',
  data() {
    return {
      imgUrl: '',
      visible: false,
      loadedFn: null
    }
  },
  methods: {
    open(ossUrl, cb) {
      this.visible = true
      this.imgUrl = ossUrl
      this.$nextTick(() => {
        this.loadResource()
      })
      this.loadedFn = () => {
        if (!this.imgUrl) {
          return message.error('url不能为空')
        }
        // window.__PLM_GLOBAL__.sketchpad.imageUrl = this.imgUrl
        window.__PLM_GLOBAL__.eventManager.emit('sketchpad.insertImg', {
          url: this.imgUrl,
          insertOnCanvasDirectly: true
        })
      }
      // 监听画板加载完毕
      window.__PLM_GLOBAL__.eventManager.on('sketchpad.loaded', this.loadedFn)
      window.__PLM_GLOBAL__.eventManager.on('sketchpad.export', cb)
    },
    onClose() {
      this.visible = false
      this.removeSketchpadRoot()
    },
    removeSketchpadRoot() {
      const nodeList = Array.prototype.slice.call(
        document.querySelectorAll('[data-module-id="sketchpadRoot"]')
      )
      nodeList.forEach(element => {
        element.remove()
      })
      window.__PLM_GLOBAL__.eventManager.off('sketchpad.loaded')
      window.__PLM_GLOBAL__.eventManager.off('sketchpad.export')
      window.__PLM_GLOBAL__.eventManager.off('sketchpad.insertImg')
      window.__PLM_GLOBAL__.sketchpad.imageUrl = null
    },
    loadResource() {
      const sketchpadRootJs = document.querySelectorAll('sketchpadRoot')
      if (!sketchpadRootJs.length) {
        insertHtmlResourceFont([
          {
            id: 'sketchpadRoot',
            href: `${process.env.VUE_APP_SKETCHPAD}/Virgil.woff2`
          },
          {
            id: 'sketchpadRoot',
            href: `${process.env.VUE_APP_SKETCHPAD}/Cascadia.woff2`
          }
        ])
        insertHtmlResourceCss([
          {
            id: 'sketchpadRoot',
            href: `${process.env.VUE_APP_SKETCHPAD}/fonts/fonts.css`
          },
          {
            id: 'sketchpadRoot',
            href: `${process.env.VUE_APP_SKETCHPAD}/assets/index.css`
          }
        ])
        insertHtmlResourceJs([
          {
            id: 'sketchpadRoot',
            src: `${
              process.env.VUE_APP_SKETCHPAD
            }/sketchpad.js?t=${new Date().getTime()}`
          }
        ])
      }
    }
  },
  mounted() {
    window.addEventListener('keydown', code => {})
  }
}
</script>
<style lang="less">
.sketchpadRoot_wrap {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 8;
  .icon-close {
    position: absolute;
    right: 10px;
    top: 8px;
    font-size: 30px;
    z-index: 8;
  }
  #sketchpadRoot {
    margin: 20px auto;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
  }
}
</style>
